{include file="public/header" /}
<link rel="stylesheet" type="text/css" href="/static/wangEditor/release/wangEditor.min.css"/>
<script type="text/javascript" src="/static/wangEditor/release/wangEditor.min.js"></script>
<article class="page-container">
    <form action="" method="post" class="form form-horizontal" enctype="multipart/form-data" id="form-add">
        <div class="row cl">
            <label class="form-label col-xs-5 col-sm-5"><span class="c-red">*</span>商品名称：</label>
            <div class="formControls col-xs-5 col-sm-5">
                <input type="text" class="input-text" value="{$data.name|default=''}" placeholder="" id="name" name="name">
            </div>
        </div>
        <div class="row cl queueList">
            <label class="form-label col-xs-5 col-sm-5"><span class="c-red">*</span>商品图片：</label>
            <div class="file">
                <span>选择图片</span>
                <input type="file"  value="{$data.img|default=''}" name="file" datatype="*" nullmsg="商品图片不能为空" onchange="upload();" id="photoFile">
                <input type="hidden" name="img" value="{$data.img|default=''}" id="pic">
            </div>
            <img id="preview_photo" src="{$data.img_url|default=''}" width="200px" height="200px" {empty name='$data.img_url'}style="display:none"{/empty}>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-5 col-sm-5"><span class="c-red">*</span>商品价格：</label>
            <div class="formControls col-xs-5 col-sm-5">
                <input type="text" maxlength="10" class="input-text" value="{$data.price|default=''}" placeholder="" name="price">
            </div>
            <div class="col-4"> </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-5 col-sm-5"><span class="c-red">*</span>商品简介：</label>
            <div class="formControls col-xs-5 col-sm-5">
                <textarea name="introduction" style="width:100%; height:100px;">{$data.introduction|default=''}</textarea>
            </div>
            <div class="col-4"> </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-5 col-sm-5"><span class="c-red">*</span>商品介绍：</label>
            <div class="formControls col-xs-5 col-sm-5">
                <textarea name="content" id="text1" style="width:100%; height:200px;display: none">{$data.content|default=''}</textarea>
            </div>
            <div class="col-4"> </div>
        </div>
        <div id="div1" style="padding: 20px"></div>
        <div class="row cl" style="width: 100%">
            <label class="form-label col-xs-5 col-sm-5"><span class="c-red">*</span>是否上架：</label>
            <div class="formControls col-xs-5 col-sm-5">
                <select name="status" class="select">
                    <option value="0" {if condition="isset($data.status) && $data.status eq 0"}selected="selected"{/if}>下架</option>
                    <option value="1" {if condition="isset($data.status) && $data.status eq 1"}selected="selected"{/if}>上架</option>
                </select>
            </div>

        </div>
        <div class="row cl">
            <div class="col-xs-5 col-sm-5 col-xs-offset-4 col-sm-offset-3">
                <input type="hidden" value="{$data.id|default=''}" name="id">
                <input class="btn btn-primary radius" type="submit" value="&nbsp;&nbsp;提交&nbsp;&nbsp;">
            </div>
        </div>
    </form>
</article>


{include file="public/footer" /}
<script type="text/javascript">
    var E = window.wangEditor
    var editor = new E('#div1')
    var $text1 = $('#text1')
    editor.customConfig.onchange = function (html) {
        // 监控变化，同步更新到 textarea
        $text1.val(html)
    }
    editor.customConfig.uploadImgMaxLength = 1
    editor.customConfig.uploadImgMaxSize = 10 * 1024 * 1024
    editor.customConfig.uploadImgServer = '/shop/uploadFieldByEdit'
    editor.customConfig.uploadFileName = 'file'
    editor.customConfig.uploadImgHeaders = {
        'Accept': 'text/x-json'
    }
    editor.customConfig.uploadImgTimeout = 3000
    editor.create()
    editor.txt.html($text1.text())
    $(function(){
        $("#form-add").validate({
            rules:{
            },
            onkeyup:false,
            focusCleanup:true,
            success:"valid",
            submitHandler:function(form){
                $(form).ajaxSubmit({
                    success:function(data){
                        console.log(data);
                        if(data.status == 0){
                            layer.msg("操作成功",{icon:1,time:1000,shade: [0.3, '#000']},function(){
                                var index = parent.layer.getFrameIndex(window.name);
                                parent.location.reload();
                                parent.layer.close(index);
                            });
                        }else{
                            layer.msg(data.info,{icon:2,time:1000,shade: [0.3, '#000']});
                        }
                    },
                    error:function(error){
                        layer.msg('系统发生了错误',{icon:2,time:3000,shade: [0.5, '#FF0000']});
                    }
                });
            }
        });
    });
    /***
     *  上传文件
     * @param file 需要上传的文件
     * @param filePath 上传文件到哪个位置。按官方说法就是key
     * cos是对象存储, 没有path路径概念，不过个人认为这个可以当作路径比较好理解
     */
    function upload() {
        if ($("#photoFile").val() == '') {
            layer.msg('请选择上传文件');
        }
        var formData = new FormData();
        formData.append('photo', document.getElementById('photoFile').files[0]);
        $.ajax({
            url:"{:url('uploadField')}",
            type:"post",
            data: formData,
            contentType: false,
            processData: false,
            success: function(data) {
                if (data.status == 1) {
                    $("#preview_photo").attr('src',data.data['save_name']);
                    $("#pic").val(data.pic);
                    $("#preview_photo").removeAttr("style","");
                    layer.msg(data.msg);
                } else if(data.status == 2) {
                    $("#preview_photo").attr('src',data.data);
                    $("#pic").val(data.pic);
                    layer.msg(data.msg);
                }else{
                    alert(data.msg);

                }
            },
            error:function(data) {
                alert("上传失败")
            }
        });
    }
</script>
